<template>
  <div class="call-customer-card clearfix">
    <div class="item-right fl">
      <div class="first-line clearfix">
        <span v-if="customList.length === 0" style="color: #303854;font-weight: bold;">未知客户</span>
        <el-dropdown
          v-else
          trigger="click"
          @command="handleCommand"
        >
          <span class="el-dropdown-link customer-name">
            {{ currentCustom.name || '创建客户' }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in customList"
              :key="index"
              :command="item"
            >
              {{ item.name }}
            </el-dropdown-item>
            <el-dropdown-item command="new" divided>
              <el-button type="text" icon="el-icon-plus">创建客户</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div class="second-line clearfix">
        <!-- <span class="customer-info">{{ phoneNumber }}</span>
        <span class="customer-info">{{ currentCustom }}</span>
        <span class="customer-info">{{ customList }}</span> -->
        <!-- <span class="customer-info">归属人：-</span> -->
        <span v-show="currentCallData.callType === 'dialout'">
          <span class="customer-info">
            外显号码：{{ currentCallData.displayNumber }}
            <span> {{currentCallData.callerProvince}}-{{currentCallData.callerCity}}</span>
          </span>
        </span>
        <span v-show="currentCallData.callType === 'incoming'">
          <span class="customer-info"
            >服务号：{{ currentCallData.trunkNumber }}</span
          >
          <span class="customer-info"
            >语音导航：{{ currentCallData.ivrName }}</span
          >
          <span class="customer-info"
            >技能组：{{ currentCallData.queueName }}</span
          >
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// import { CommonModule } from '@/store/modules/common'
import { CallCardModule } from '@/store/modules/cti/callCard'
@Component({
  name: 'CustomerCard',
  components: {}
})
export default class CustomerCard extends Vue {
  // @Prop({ default: {} }) private callData!: any

  private $bus: any
  private $route: any
  private isCall = false
  private currentCustom: any = {}
  private customList: any = []
  private callData: any = {}

  private get currentCallData () {
    if (this.isCall) {
      return this.callData
    } else {
      let callData = {}
      if (this.$route && this.$route.params) {
        const setType = this.$route.params.activeName
        const callId = this.$route.params.id
        // eslint-disable-next-line no-unused-vars
        let currentListName
        if (setType === 'cdr_call') {
          currentListName = 'callInList'
        }
        if (setType === 'cdr_outbound') {
          currentListName = 'outboundList'
        }
        const callInList = JSON.parse((window as any).sessionStorage.getItem(setType)) || []
        callInList.some((item) => {
          if (item.id === callId) {
            callData = item.body
            return true
          }
        })
      }
      return callData
    }
  }

  private mounted () {
    // this.$bus.$on(
    //   'initCustomerCard',
    //   (callObj: object) => {
    //     // console.log('initCustomerCard callObj:\n', callObj)
    //     console.log('on:\n', callObj)
    //     this.callData = callObj
    //     this.handleFetchCustomer(this.callData)
    //   }
    // )
  }

  private created () {
    this.initCallData()
  }

  private initCallData () {
    if (Object.keys(this.callData).length > 0) {
      this.isCall = true
    }
  }

  get phoneNumber () {
    // console.log('加载后一直触发：computed get phoneNumber')
    if (this.$route.name === 'callCard' && this.$route.query) {
      // console.log('$toute:\n', this.$route)
      return this.$route.query.phone
    }
  }

  public regainCustomer (name) {
    // const data = {
    //   // worksheetId: (CommonModule as any).session.user.mpCrmWorksheetId,
    //   type: 1, // 1:精准 2:模糊
    //   phone: this.phoneNumber
    // }
    // CallCardModule.CdrLocateCust(data).then(res => {
    //   if (res && res.success) {
    //     console.log('public 200:\n', res.data)
    //     this.customList = res.data
    //     if (this.customList.length === 0) {
    //       this.currentCustom = {}
    //     } else {
    //       this.currentCustom = this.customList.find(v => v.name === name)
    //     }
    //     console.log('重新获取数据:\n', this.currentCustom)
    //   }
    // })
  }

  // @Watch('phoneNumber')
  private handleFetchCustomer (callObj: any) {
    const data = {
      type: 1, // 1:精准 2:模糊
      phone: callObj.phone
    }
    CallCardModule.CdrLocateCust(data).then(res => {
      if (res && res.success) {
        // console.log(callObj.addName)
        // console.log(200, res.data)
        this.customList = res.data
        if (this.customList.length === 0) {
          this.currentCustom = { id: '', name: '' }
        } else {
          this.currentCustom = this.customList.find(v => v.name === callObj.addName) || this.customList[0]
        }
        // this.$emit('change', this.currentCustom)
        this.handleBusEmit()
      }
    })
  }

  private handleCommand (command) {
    this.currentCustom = command
    // this.$emit('change', command)
    this.handleBusEmit()
  }

  private handleBusEmit () {
    const data = {
      ...this.callData,
      customerId: this.currentCustom.id,
      customerName: this.currentCustom.name
    }
    setTimeout(() => {
      this.$bus.$emit('initSummaryCustomer', data)
      this.$bus.$emit('initSummaryTicket', data)
      this.$bus.$emit('initSummaryHistory', data)
    }, 0)
  }
}
</script>

<style lang="stylus" scoped>
.call-customer-card
  // border: 1px solid red;
  height 68px
  background-color #E5F3FD
  border-radius 4px
  margin-bottom 8px
  .item-left
    height inherit
    line-height 68px
    display flex
    align-items center
    justify-content center
    padding 0 0 0 24px
    .agent-img
      width 40px
      height 40px
      border-radius 50%
  .item-right
    width auto
    height 100%
    padding-left 20px
    .first-line
      margin-top 18px
      height 16px
      line-height 16px
      .customer-name
        color $fc-gray2
        font-size 12px
        font-weight bold
        cursor pointer
      & >>> .el-button--text
        padding 0
        span
          padding-left 0
    .second-line
      margin-top 6px
      height 16px
      line-height 16px
      .customer-info
        color $fc-gray3
      .customer-info + .customer-info
        margin-left 20px
.el-dropdown-menu
  padding-bottom 0
</style>
